<template>
  <view class="container">
    <!-- 搜索框 -->
    <view class="search-wrapper">
      <view class="index-search">
        <view class="index-cont-search t-c">
          <text class="search-icon iconfont icon-search"></text>
          <text class="search-text">搜索商品</text>
        </view>
      </view>
    </view>
    <!-- 二级分类 -->
    <view class="secondary">
      <!-- 二级分类 20 -->
      <view class="cate-content">
        <!-- 左侧 一级分类 -->
        <scroll-view
          class="cate-left"
          :scroll-y="true"
          :style="{ height: `400px` }"
        >
          <view
            v-for="(item, index) in classifyList"
            :key="item.id"
            class="type-nav"
            :class="{ selected: activeIndex === index }"
            @click="activeIndex = index"
          >
            {{ item.name }}
          </view>
        </scroll-view>
        <!-- 右侧 二级分类 -->
        <scroll-view
          class="cate-right"
          :scroll-y="true"
          :style="{ height: `400px` }"
        >
          <view class="cate-right-cont">
            <view class="cate-two-box">
              <view class="cate-cont-box">
                <view
                  class="flex-three"
                  v-for="item in categorySubList"
                  :key="item.category_id"
                  @click="skip(item.category_id)"
                >
                  <view class="cate-img-padding">
                    <view class="cate-img">
                      <image
                        class="image"
                        mode="scaleToFill"
                        :src="item.image.external_url"
                      ></image>
                    </view>
                  </view>
                  <text class="name oneline-hide">{{ item.name }}</text>
                </view>
              </view>
            </view>
          </view>
        </scroll-view>
      </view>
    </view>
  </view>
</template>

<script>
import { list } from '@/api/category/index.js'
export default {
  data () {
    return {
      classifyList: [],
      // 当前显示的菜单下标
      activeIndex: 0
    }
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad () {
    this.getPageData()
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow () {},
  computed: {
    categorySubList () {
      return this.classifyList?.[this.activeIndex]?.children || []
    }
  },
  methods: {
    // 获取页面数据
    async getPageData () {
      const res = await list()
      console.log(res)
      this.classifyList = res.data.list
    },
    // 跳转页面
    skip (id) {
      uni.navigateTo({
        url: `/pages/goods/list?categoryId=${id}`
      })
    }
  }
}
</script>

<style>
page {
  background: #fff;
}
</style>
<style lang="scss" scoped>
// 分类内容
.cate-content {
  display: flex;
  z-index: 1;
  background: #fff;
  // padding-top: 96rpx;
}

// 一级分类+二级分类 20
.cate-left {
  height: 100%;
  display: flex;
  flex-direction: column;
  flex: 0 0 23%;
  background: #f8f8f8;
  color: #444;
}

.cate-right {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;

  .cate-right-cont {
    width: 100%;
    display: flex;
    flex-flow: row wrap;
    align-content: flex-start;
    padding-top: 15rpx;

    .cate-two-box {
      width: 100%;
      padding: 0 10px;
    }
  }
}

// 左侧一级分类
.type-nav {
  position: relative;
  height: 90rpx;
  z-index: 10;
  display: block;
  font-size: 26rpx;
  display: flex;
  justify-content: center;
  align-items: center;

  &.selected {
    background: #fff;
    color: #fa2209;
    border-right: none;
    font-size: 28rpx;
  }
}

// 右侧二级分类
.cate-cont-box {
  margin-bottom: 30rpx;
  padding-bottom: 10rpx;
  background: #fff;
  overflow: hidden;

  .name {
    display: block;
    padding-bottom: 30rpx;
    text-align: center;
    font-size: 26rpx;
    color: #444444;
  }

  .cate-img-padding {
    padding: 16rpx 16rpx 4rpx 16rpx;
  }

  .cate-img {
    position: relative;
    width: 100%;
    padding-top: 100%;

    .image {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      border-radius: 10rpx;
    }
  }
}
.search-wrapper {
  background: #fff;
  padding: 13rpx;
}

.index-search {
  border-bottom: 0;
  background: #fff;
  border-radius: 50rpx;
  overflow: hidden;
  font-size: 28rpx;
  color: #6d6d6d;
  box-sizing: border-box;
  height: 64rpx;
  line-height: 64rpx;

  .index-cont-search {
    width: 100%;
    font-size: 28rpx;
    background: #f7f7f7;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .index-cont-search .search-icon {
    font-size: 28rpx;
  }

  .index-cont-search .search-text {
    margin-left: 14rpx;
  }
}
// 搜索框
.search {
  position: fixed;
  top: var(--window-top);
  left: var(--window-left);
  right: var(--window-right);
  z-index: 9;
  padding-bottom: 20rpx;
}
</style>
